<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="/js/bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="/js/jquery/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>

  </head>
  <body>
    <h1>你好，世界！</h1>
<!--     <h1>h1. Bootstrap heading</h1>
    <h1>h1. Bootstrap heading <small>Secondary text</small></h1> -->
    
	<!-- <div class="row">
		<div class="col-md-1" style="height: 20px;background-color: red;">1</div>
		<div class="col-md-6" style="height: 20px;background-color: yellow;">6</div>
		<div class="col-md-3" style="height: 20px;background-color: blue;">3</div>
	</div>
	<div class="row">
		<div class="col-xs-1" style="height: 20px;background-color: red;">1</div>
		<div class="col-xs-6" style="height: 20px;background-color: yellow;">6</div>
		<div class="col-xs-3" style="height: 20px;background-color: blue;">3</div>
	</div>
	 -->
	<!-- <div class="row">
	列偏移
	  <div class="col-md-4 col-md-offset-4" style="height: 20px;background-color: pink;">col-md-4 col-md-offset-4</div>
	</div>
	
	<del>这个是被删除的对象.</del><br/>
	<s>这个是没用的文本.</s><br/>
	<small>这个是小一号文本.</small>
	<strong>rendered as bold text</strong>
	 -->
	<!-- <table class="table table-bordered"> -->
	<table class="table table-responsive">
	<!-- <table class="table table-hover"> -->
	<!-- <table class="table-condensed"> -->
		<thead>
			<tr>
				<th>title</th>
				<th>title</th>
				<th>title</th>
				<th>title</th>
			</tr>
		</thead>
		<tbody>
			<tr  class="success">
				<td>value</td>
				<td>value</td>
				<td>value</td>
				<td>value</td>
		</tbody>
	</table>

	<form role="form" class="form-inline" >
		<div class="form-group">
			<label for="exampleInputEmail1">姓名</label> <input
				type="email" class="form-control" id="exampleInputEmail1"
				placeholder="输入名字">
		</div>
		<div class="form-group">
			<label for="exampleInputPassword1">Password</label> <input
				type="password" class="form-control" id="exampleInputPassword1"
				placeholder="Password">
		</div>
		<div class="form-group">
			<label for="exampleInputFile">File input</label> <input type="file"
				id="exampleInputFile">
			<p class="help-block">Example block-level help text here.</p>
		</div>
		<div class="checkbox">
			<label> <input type="checkbox"> Check me out
			</label>
		</div>
		<button type="submit" class="btn btn-default">Submit</button>
	</form>
	
	<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>
	<button type="button" class="btn btn-default">Default</button>
	<button type="button" class="btn btn-primary">Default</button>
	<button type="button" class="btn btn-success">Default</button>
	
	<p>
 	 <button type="button" class="btn btn-primary btn-lg active">Large button</button>
 	 <button type="button" class="btn btn-default btn-lg disabled ">Large button</button>
	</p>
	<p>
		<button type="button" class="btn btn-primary btn-sm">Small
			button</button>
		<button type="button" class="btn btn-default btn-sm">Small
			button</button>
	</p>
	<p>
		<button type="button" class="btn btn-primary btn-xs">Extra
			small button</button>
		<button type="button" class="btn btn-default btn-xs">Extra
			small button</button>
	</p>
	<img src="/images/juhua.png" class="img-circle img-thumbnail" alt="Responsive image"  width="20%" >


	<p class="text-muted">...11111</p>
	<p class="text-primary">...22222</p>
	<p class="text-success">...3333333</p>
	
	<p class="bg-primary">...444</p>
<p class="bg-success">...555</p>
<p class="bg-info">...666</p>

<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<div class="pull-left">888888</div>
<div class="pull-right">999999</div><br/>


<span class="glyphicon glyphicon-expand">333</span>
<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  
  <ul class="dropdown-menu dropdown-menu-right " role="menu"  aria-labelledby="dropdownMenu1">
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">禁用按钮</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation" ><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
  	<button type="button" class="btn btn-default">1</button>
  	<button type="button" class="btn btn-default">2</button>
  	<button type="button" class="btn btn-default">3</button>
  </div>
  <div class="btn-group">2</div>
  <div class="btn-group">3</div>
  <div class="btn-group">4</div>
  <div class="btn-group">5</div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>
 <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
  </div>
  
  <div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>


<ul class="pagination">
  <li ><a href="#">&laquo;</a></li>
  <li class="disabled"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>



<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="/images/juhua.png" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="/images/juhua.png" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>


</body>
</html>